<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <el-row style="margin-top:2px">
              <el-col :span="3">
                <label>路线ID:</label>
              </el-col>
              <el-col :span="7">
                <el-input
                  suffix-icon="el-icon-search"
                  v-model="searchVal" style="width: 200px;">
                </el-input>
              </el-col>
              <el-col :span="14">
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top:2px">
          <el-col :span="3">
            <label>用户ID:</label>
          </el-col>
          <el-col :span="7">
            <el-input
              suffix-icon="el-icon-search"
              v-model="searchVal" style="width: 200px;">
            </el-input>
          </el-col>
          <el-col :span="14">
          </el-col>
        </el-row>
        <el-row style="margin-top:2px">
          <el-col :span="3">
            <label>开始日期:</label>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              v-model="startTime"
              type="datetimerange"
              :picker-options="pickerOptions2"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-col>
          <el-col :span="14">
          </el-col>
        </el-row>
        <el-row style="margin-top:2px">
          <el-col :span="3">
            <label>状态:</label>
          </el-col>
          <el-col :span="7">
            <el-select v-model="orderStatusValue" placeholder="请选择">
              <el-option
                v-for="item in orderStatusModel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-button type="info" plain @click="searchClk">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="envGrid"
          border
          highlight-current-row
          @row-click="selectRow"
          @sort-change="sortClick"
          :data="tableData2"
          style="width: 100%">
          <el-table-column
            prop="orderId"
            label="主键"
            sortable="custom"
            width="250">
          </el-table-column>
          <el-table-column
            prop="createtime"
            sortable="custom"
            label="下单时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span>{{ scope.row.createTime | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userId"
            sortable="custom"
            label="用户ID">
          </el-table-column>
          <el-table-column
            prop="lineId"
            sortable="custom"
            label="路线ID">
          </el-table-column>
          <el-table-column
            prop="orderStatus"
            sortable="custom"
            label="订单状态">
            <template slot-scope="scope">
              <span>{{ scope.row.orderStatus | formatOrderStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="finishFlag"
            sortable="custom"
            label="完成状态">
          </el-table-column>
          <el-table-column
            prop="orderAmt"
            label="总额">
          </el-table-column>
          <el-table-column
            prop="orderPayAmt"
            label="实付">
          </el-table-column>
          <el-table-column
            prop="thirdAmt"
            label="三方扣款金额">
          </el-table-column>
          <el-table-column
            prop="platformAmt"
            label="平台扣款">
          </el-table-column>
          <el-table-column
            prop="couponAmt"
            label="优惠券">
          </el-table-column>
          <el-table-column
            prop="operatorId"
            label="操作人">
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10,50,100]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="totalCount">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  import { post, formatDate, orderStatus } from "../../../util/util";

  export default {
    components: {
      ElCol,
      ElRow
    },
    methods: {
      selectRow (row) {
        this.$refs.envGrid.setCurrentRow(row);
        let idx = this.selectRows.indexOf(row);
        if (idx >= 0) {
          this.$refs.envGrid.clearSelection();
          this.selectRows.pop(row);
        } else {
          this.selectRows.push(row);
        }
      },
      handleSizeChange (val) {
        this.gridQueryParam.pageSize = val;
        this.requestData();
      },
      handleCurrentChange (val) {
        this.gridQueryParam.page = val;
        this.requestData();
      },
      sortClick (col) {
        this.gridQueryParam.sort = col.prop;
        this.gridQueryParam.order = ((col.order === "ascending") ? "asc" : "desc");
        this.requestData();
      },
      searchClk () {
        this.requestData();
      },
      requestData () {
        let that = this;
        let queryParam = that.gridQueryParam;
        let params = {
          "pageUtil.sort": !queryParam.sort ? "userId" : queryParam.sort,
          "pageUtil.order": !queryParam.order ? "asc" : queryParam.order,
          "pageUtil.pageId": !queryParam.page ? 1 : queryParam.page,
          "pageUtil.pageSize": !queryParam.pageSize ? 10 : queryParam.pageSize,
          "pageUtil.condRelat": queryParam.condRelat
        };
        if (this.searchVal) {
          params.phoneNum = that.searchVal;
          params.userName = that.searchVal;
          params["pageUtil.condRelat"] = "or";
        } else {
          params["pageUtil.condRelat"] = "and";
        }
        post("/admin/orderMgr/list.do", params).then((res) => {
          if (res) {
            let data = res.data.data;
            that.tableData2 = data.rows;
            that.totalCount = data.total;
          }
        });
      }
    },
    data () {
      return {
        gridQueryParam: {
          page: 1,
          pageSize: 10,
          sort: "orderId",
          order: "asc",
          condRelat: "and"
        },
        searchVal: "",
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        tableData2: [],
        selectRows: [],
        pickerOptions2: {
          shortcuts: [{
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          }, {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }, {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }]
        },
        startTime: "",
        orderStatusModel: orderStatus(),
        orderStatusValue: ""
      };
    },

    created () {
      this.requestData();
    },
    filters: {
      formatDate (time) {
        let date = new Date(time);
        return formatDate(date, "yyyy-MM-dd hh : mm");
      },
      formatOrderStatus (code) {
        let ost = orderStatus();
        for (let i = 0; i < ost.length; i++) {
          let ot = ost[i];
          if (ot.value === parseInt(code)) {
            return ot.label;
          }
        }
        return "";
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-table__body tr.current-row > td {
    background: #ffe48d !important;
  }
</style>
